<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="item of swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" >
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
    </div>
</template>
<script>
export default {
    name: 'HomeSwiper',
    data () {
        return {
           swiperOption:{
            pagination:'.swiper-pagination',
            loop:true,// 让轮播支持循环轮播  如果改成 false的话 就不支持循环轮播
           },
           //循环输出
           swiperList:[{
            id:'0001',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1806/3c/c72a1ccd4d7b2202.jpg_750x200_b88bbab4.jpg'
           },{
            id:'0002',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/ec/278a34afb59a0d02.jpg_750x200_3292a705.jpg'
           }]
        }
    }
}
</script>
<style lang="stylus" scoped>
.wrapper>>>.swiper-pagination-bullet-active
   background:#fff 
.wrapper
 overflow:hidden
 width:100%
 height:0
 padding-bottom:26.7%
 background:#eee
.swiper-img
  width:100%

</style>
